<template>
  <div>
    <div class="box"></div>
    <div class="footer">
      <ul class="db tac">
        <li v-for="(item, index) in list" :key="index" class="item">
          <div
            @click="jump(item.path, index)"
            :class="activeTitle === item.name ? 'on' : ''"
          >
            <img
              :src="activeTitle === item.name ? item.activeImg : item.imgurl"
              alt
              v-if="item.name != 'Revenue'"
            />
            <div class="Revenue" v-if="item.name == 'Revenue'">
              <img v-if="activeTitle == 'Revenue'" src="@/assets/images/Revenue_on.png" alt="">
              <img v-else src="@/assets/images/Revenue.png" alt="">
            </div>

            <span>
            {{ item.title }}
          </span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          title: this.$t("page.doc124"),
          imgurl: require("../assets/images/ico_home.png"),
          name: "home",
          activeImg: require("../assets/images/ico_home_on.png"),
          path: "/",
        },
        {
          title: this.$t("page.doc123"),
          name: "promote",
          imgurl: require("../assets/images/ico_tg.png"),
          activeImg: require("../assets/images/ico_tg_on.png"),
          path: "/promote/index",
        },
        {
          title: this.$t("page.Revenue"),
          name: "Revenue",
          imgurl: require("../assets/images/Revenue.png"),
          activeImg: require("../assets/images/Revenue_on.png"),
          path: "/income/index",
        },
        {
          title: this.$t("page.doc121"),
          name: "record",
          imgurl: require("../assets/images/ico_jl.png"),
          activeImg: require("../assets/images/ico_jl_on.png"),
          path: "/home/record",
        },
        {
          title: this.$t("title.doc12"),
          name: "my",
          imgurl: require("../assets/images/ico_my.png"),
          activeImg: require("../assets/images/ico_my_on.png"),
          path: "/my/index",
        },
      ],
    };
  },
  props: ["activeTitle"],
  mounted() {
  },
  methods: {
    jump(url, index) {
      this.$router.push(url);
    },
  },
};
</script>
<style lang="less" scoped>
#main {
  &.w856 {
    .footer {
      width: 100%;
    }
  }
}

.box {
  z-index: -1;
  position: absolute;
  top: -85px;
  left: 50%;
  transform: translateX(-50%);
  width: 62px;
  height: 62px;
  border-radius: 999px;
  background: #122b2b;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  max-width: 10rem;
  width: 100%;
  background: linear-gradient(180deg, rgba(18,43,43,1) 0%, rgba(1,1,1,1) 100%);
  z-index: 10;
  padding: 12px 0;

  ul {
    li {
      width: 24%;

      div {
        img {
          vertical-align: top;
          width: 24px;

          &.on {
            height: 0.96rem;
            width: 0.96rem;
            margin-bottom: -0.1rem;
          }
        }

        span {
          display: block;
          margin-top: 0.07rem;
          opacity: 0.9;
          font-size: 0.22rem;
          font-weight: 400;
          color: #999999;
          line-height: 0.28rem;
        }

        &.on {
          span {
            color: #06cc63;
            opacity: 1;
          }
        }
      }

      .Revenue {
        position: relative;
        width: 24px;
        height: 24px;
        margin: 0 auto;

        img {
          position: absolute;
          top: -20px;
          left: 50%;
          transform: translateX(-50%);
          width: 42px;
          height: 42px;
          max-width: 42px;
          max-height: 42px;
        }
      }
    }

    li:nth-child(3) {
      div {
        img {
          &.on {
            width: 1.24rem !important;
            height: 1.24rem !important;
            position: relative;
            bottom: 0.2rem;
          }
        }
      }
    }
  }
}
</style>
